<template>
    <basic-container>
        <el-row style="padding: 10px 20px">
            <el-radio-group v-model="timeSize" size="small" @change="changeTimeSize">
                <el-radio-button label="2">前日</el-radio-button>
                <el-radio-button label="7">最近7天</el-radio-button>
                <el-radio-button label="30">最近30天</el-radio-button>
            </el-radio-group>
            <span style="margin-left: 10px">时间筛选: </span>
            <el-date-picker placeholder="开始时间" @change="getBeforeTime" value-format="yyyy-MM-dd" v-model="beginTime"
                            type="date" size="mini">
            </el-date-picker>

            <span style="margin-left:10px">至</span>

            <el-date-picker style="margin-left: 10px" placeholder="结束日期" @change="getTime" value-format="yyyy-MM-dd"
                            v-model="endTime" type="date" size="mini">
            </el-date-picker>

            <el-button style="margin-left: 10px" type="primary" size="small" plain @click.stop="search()">搜索</el-button>
            <el-button style="margin-left: 10px" type="primary" size="small" plain @click.stop="clear()">清空</el-button>
            <el-button style="margin-left: 10px" type="primary" size="small" plain @click.stop="outExcel()">导出
            </el-button>
        </el-row>
<!--        <avue-echart-line :theme="theme" :data="data" width="1200"></avue-echart-line>-->
        <div ref="myEcharts" style="width: 100%;height: 500px;"></div>
    </basic-container>
</template>
<script>
    import {
        getStoreViewsList
    } from "@/api/base/reportCenter/seller/orderStatistics";
    import {getToken} from '@/util/store';
    import {onlyDateFormat} from '@/util/date';

    export default {
        data() {
            return {
                timeSize: '',//时间跨度
                fillColor: '#73A0C8',
                theme: '',
                beginTime: '',
                endTime: '',
                data: {
                    categories: [],
                    series: [
                        {
                            name: "访问量",
                            data: []
                        },
                    ]
                },
                /*option: {
                    switchTheme: true,
                    width: 1200,
                    height: 600,
                    title: '手机大比拼',
                    smooth: true,//是否顺滑
                    //areaStyle: true,//是否面积
                }*/
            }
        },
        mounted() {
            this.transferMethod()
        },
        methods: {
            // 选择时间跨度
            changeTimeSize(value) {
                let date = Date.now() - value * 24 * 60 * 60 * 1000;
                this.endTime = onlyDateFormat(new Date());
                this.beginTime = onlyDateFormat(new Date(date));
                this.transferMethod();
            },
            outExcel() {
                let token = getToken();
                let beginTimeStr = this.beginTime === undefined ? "" : this.beginTime;
                let endTimeStr = this.endTime === undefined ? "" : this.endTime;
                window.location.href = '/base/sellerStore/outStoreAccessExcel?token=' + token + '&beginTimeStr=' + beginTimeStr + '&endTimeStr=' + endTimeStr;
            },
            getBeforeTime() {
                if (this.endTime) {
                    if (this.beginTime > this.endTime) {
                        this.$message({
                            type: "error",
                            message: "开始时间不能大于结束时间"
                        });
                        this.beginTime = ''
                    }
                }
            },
            getTime() {
                if (this.beginTime > this.endTime) {
                    this.$message({
                        type: "error",
                        message: "结束时间不能小于开始时间"
                    });
                    this.endTime = ''
                }
            },
            search() {
                this.transferMethod()
            },
            clear() {
                this.beginTime = '';
                this.endTime = '';
                this.transferMethod()
            },
            transferMethod() {
                /*if (this.beginTime) {
                    this.beginTime = new Date().getTime() - 24 * 60 * 60 * 1000; //前一天
                }*/
                let mychart = this.$ECHARTS.init(this.$refs.myEcharts)
                let beginTimeStr = this.beginTime === null ? "" : this.beginTime;
                let endTimeStr = this.endTime === null ? "" : this.endTime;
                getStoreViewsList(beginTimeStr, endTimeStr).then(res => {
                    if (res.data.code == 200) {
                        let obj = res.data.data;
                        let xData = [];
                        let yData = [];
                        if (obj.length > 0) {
                            for (let i = 0; i < obj.length; i++) {
                                xData.push(obj[i].xDataTime);
                                yData.push(obj[i].viewNum);
                            }
                        }
                        let options = {
                            title: {
                                text: '访问量',   //图表顶部的标题
                            },
                            tooltip: {   //鼠标悬浮框的提示文字
                                trigger: 'axis'
                            },
                            xAxis : [{  //x轴坐标数据
                                type : 'category',
                                boundaryGap : true,
                                data : xData
                            }],
                            yAxis : [{   //y轴坐标数据
                                type : 'value',
                                data:yData
                            }],
                            series: [  //驱动图表生成的数据内容数组，几条折现，数组中就会有几个对应对象，来表示对应的折线
                                {
                                    name:"访问量",
                                    type: "line",  //pie->饼状图  line->折线图  bar->柱状图
                                    smooth:true,
                                    data:yData,
                                }
                            ]}
                        mychart.setOption(options);
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.message
                        });
                    }
                })
            },
            rowStyle({row, column, rowIndex}) {
                if (rowIndex % 2 === 0) {
                    return {
                        backgroundColor: '#eee',
                        color: 'black'
                    }
                }
            }
        }
    }
</script>
